HTML چیست ؟

عبارت HTML ( اچ تی ام ال ) مخفف Hyper Text Markup Language به معنی زبان نشانه گذاری فوق متن است. Html زبان استاندارد طراحی صفحات وب است و کليه کدهای صفحه اعم از طرف سرور و طرف مشتری در نهايت به کدهای HTML تبديل شده و توسط مرورگر نمايش داده می شوند.

به عبارت دیگر مرورگر ها هیچکدام از کدها و کنترل های سمت سرور همچون کدهای asp و php را نمیشناسند و کد قابل فهم برای آنها اچ تی ام ال می باشد.

کامپایلر های زبان های برنامه نویسی سروری در نهایت کد های خود را برای نمایش به کد اچ تی ام ال تبدیل میکنند و برای مرورگر میفرستند تا به کاربران نمایش داده شود.

HTML یک زبان نشانه گذاری است ، به اين معنی که بخش های مختلف توسط اجزايی به نام تگ از هم جدا شده ، که هر کدام دارای کاربرد و خواص مربوط خود هستند . اين تگ ها به مرورگر اعلام می کنند که هر بخش از صفحه چه نوع عنصری است و بايد به چه صورت نمايش داده شود .

در مقاله ی تگ های Html به این موصوع به طور مفصل پرداخته شده است.
در يک صفحه HTML می توان انواع عناصر از قبيل متن ، تيتر ، عکس ، جدول  و ... را قرار داد ، که برای هر عنصر بايد از تگ مربوط به آن استفاده کرد . صفحات HTML فقط از کد ها که به صورت متن هستند تشکيل شده اند. بدین معنا که برای تصویر کد مربوط به تمایش تصویر و جدول و ... کدهای اچ تی ام ال مربوط به هر یک را باید نوشت و مرورگر با رسیدن به این کد ها و تگ ها ، المنت های مرتبط با آن را نمایش می دهد.

Meta Tag ها

متاتگ ها ( Meta Tag ) در واقع اطلاعاتی هستند که برای موتور های جستجوگر وب مانند گوگل و یاهو نوشته می شنود تا در هرچه بهتر ایندکس کردن صفحات استفاده شوند.

استفاده ی درست از این متاتگ ها تاثیر بسیار زیادی بر ایندکسینگ و شناخت بهتر موتور های جستجو مثل گوگل و یاهو و ... از سایت ما دارد تا با این روش که در بخش آموزش سئو (Seo) و بهینه سازی سایت برای موتور های جستجو به طور کامل به ان پرداخته می شود ، سایت شما و صفحات شما در رتبه ی بالایی در گوگل و یاهو و ... قرار بگیرند.

مرجع نام و شماره رنگ ها در CSS

در این بخش از آموزش css به توضیح ویژگی مرجع نام و شماره رنگ ها در CSS میپردازیم.

  Colors Value 

رنگ ها در css  با روش های زیر مقدار دهی میشوند.

1. Hexadecimal colors
2. RGB colors
3. RGBA colors
4. HSL colors
5. HSLA colors
6. color names

در این بخش از آموزش css به توضیح ویژگی تنظیم شفافیت عناصر Opacity میپردازیم.

Opacity

با ویژگی Opacity میتوانید شفافیت تصاویر را تغییر دهید.

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

در این بخش از آموزش css به توضیح ویژگی نمایش عناصر Cursor , Display , Visibility میپردازیم.

cursor
انواع مختلفی از نمایش مکان نما در صفحه را مشخص میکند.
زمانی که روی یک عنصری که مشخص کرده ایم میرویم مکان نما به شکل مورد نظر نشان داده میشود.

span.crosshair {cursor:crosshair}
span.help {cursor:help}
span.wait {cursor:wait}

float

در این بخش از آموزش css به توضیح ویژگی محل قرارگیری عناصر - خواص Clear , Float میپردازیم.

با این ویژگی از css موقعیت یک عنصررا می توانید سمت چپ یا راست تنظیم کنید.

یکی از پرکاربردترین ویژگی ها در css میباشد. بادادن این ویژگی به تگ ها شما میتوانید سایت های چند ستونه ایجاد کنید. 

این خاصیت یکی از پایه های اساسی در طراحی قالب بر اساس div می باشد.

وقتی به یک عنصر در کد خود float به سمت چپ یا راست میدهید ، عنصر مورد نظر به آن سمت خاص میرود و بقیه عنصر هایی که بعد از تگ مذکور آمده اند و float ندارند به سمت مخالف رانده میشوند و اطراف عنصر مورد نظر قرار میگیرند.

.text 
{
float:left;
width:110px;
height:90px;
margin:5px;
}

clear

اگر عنصر ی بعد از عنصری که ویژگی float را دارد، خاصیت clear داشته باشد، اطراف عنصر ی که ویژگی float را دارد قرار نمی گیرد.

عنصر ی که خاصیت clear=both دارد و float نیز شده باشد، فقط عنصر هایی را که قبل از خودش آمده است، clear میکند . و عنصرهای بعدی را تحت تاثیر قرار نمیدهد

img
{
float:left;
}
p.clear
{
clear:both;
}

در این بخش از آموزش css ، تنظیم خواص باکس ها را آموزش میدهیم. همه ی عناصری که در  HTML   تعریف میشوند میتوانند این ویژگی ها را داشته باشند.

این بخش یکی از مهمترین آموزش ها ، در سی اس اس و طراحی قالب سایت می باشد.

لیست UL و LI در سی اس اس

در این بخش از آموزش css ، تنظیم لیست ها را آموزش میدهیم.

ویژگی هایی که برای یک لیست در css وجود دارد به ما این امکان را میدهد که  List را در 3 حالت زیر نمایش دهیم.

• تنظیم لیست یه صورت مرتب
• تنظیم لیست به صورت نامرتب
• تنظیم تصویر برای نشانگر لیست

در HTML  دو نوع ار انواع لیست وجود دارد

• unordered lists     آیتم های لیست با یک نشانگرد گرد شکل مشکی ، نمایش داده میشوند
• ordered lists     آیتم های لیست با اعداد یا حروف ، نشانه گذاری میشوند.

Text Color

در این بخش از آموزش css ، تنظیم متن و نوشته را آموزش میدهیم.

ویژگی color  برای تنظیم رنگ متن استفاده میشود.این ویژگی با 3 روش زیر میتواند مقدار دهی شود

• HEX : مثال : "#ff000"
•  RGB:  مثال :   (rgb(255,0,0
• نام رنگ :  مثال :  red

رنگ پیش فرض در یک صفحه وب سایت بستگی به رنگ انتخاب شده در بدنه وب سایت شما دارد

Background

در این بخش از آموزش css به توضیح ویژگی Background میپردازیم. ویژگی Background برای تعریف افکت های  پس زمینه برای یک عنصر به کار میرود.این ویژگی در طراحی وب سایت به شکیل تر شدن سایت شما کمک میکند.

انواع مختلفی از این ویژگی وجود دارد که به شرح هر یک از آنها میپردازیم

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

تنظیم ابعاد در CSS

برای تنظیم ابعاد عناصر در CSS  از چند ویژگی میتوان استفاده کرد که مهمترین و اصلی ترین آنها Width و Height میباشد.

در ذیل به توضیح این ویژگی ها با توجه به ورژن تعریف شده در CSS میپردازیم.

در این بخش از آموزش css ، اصول نوشتن کدهای css را شرح میدهیم.

• گذاشتن فاصله بین مقدار و واحد اشتباه است

مثال صحیح :

margin-left:20px;

مثال غلط:

margin-left:20 px;

• قوانین نام گذاری فایل های css

1. از کاراکترهای خاص استفاده نکنید.کاراکترهای مجاز عبارتند از :حروف a-z ، اعداد 0-9 ، خط زیر (_) ، خط فاصله (-)
2. از کاراکتر فضای خالی استفاده نکنید ( ) مثلا : style Master.css  ، این نامگذاری میتواند در وب سرور شما مشکل ایجاد کند.
3. نام فایل بایستی با یک حرف شروع شود.
4. برای نام گذاری فایل از حروف کوچک استفاده کنید.
5. نام فایل را تا آنجا که ممکن است کوتاه تعریف نمایید.
6. فراموش نکنید که حتما فایل را با پسوند css ذخیره کنید.

با رعایت تمامی این نکات شما طراحی سایت بهینه تری را خواهید داشت .

یکی از روشهای تعریف css استفاده از روش External Style Sheet میباشد.

برای داشتن طراحی سایت بهینه پیشنهاد میشود که از این روش استفاده کنید.

از CSS خارجی زمانی استفاده میشود که آن style در بیشتر صفحات استفاده شده باشد.
با استفاده از CSS خارجی ، شما با تغییر دادن تنهایک فایل میتوانید ظاهر سایت خود را تغییر دهید.هر صفحه بایستی به CSS Style مورد نظر خود لینک داده شود. بهترین روش برای گذاشتن CSS Style در صفحات وب ، CSS خارجی میباشد
با استفاده از تگ <link> در داخل بخش head شما میتوانید یک CSS خارجی تعریف کنید.
مثال :

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

CSS خارجی را میتوان در هر ویرایشگر متنی نوشت ، CSS Style ها باید با  فرمت css. ذخیره شوند. با استفاده از این سبک در واقع شما از یک Style میتوانید در چندین صفحه از وب سایت خود استفاده کنید.

برای نامگذاری فایل های CSS باید نکاتی را رعایت کرد که در بخش قوانین نام گذاری فایل های CSS  به طور کامل به آن خواهیم پرداخت.

CSS داخلی

یکی از روشهای تعریف css استفاده از روش Internal Style Sheet میباشد. برای استفاده از این روش  بایستی کد های CSS را در فایل HTML ، درون .star-rating, .star-rating a:hover, .star-rating a:active, .star-rating .current-rating{ background: url(/temp/img/star.png) left -1000px repeat-x;direction:rtl ;cursor:pointer} .star-rating{ position:relative; width:120px; height:24px; overflow:hidden; list-style:none; margin:0; padding:0; background-position: left top;direction:rtl } .star-rating li{ display: inline;padding:0px;} .star-rating a, .star-rating .current-rating{ position:absolute; top:0; left:0; text-indent:-1000em; height:24px; line-height:24px; outline:none; overflow:hidden; border: none; } .star-rating a:hover, .star-rating a:active{ background-position: left bottom; } .star-rating a.one-star{ width:20%; z-index:6; } .star-rating a.two-stars{ width:40%; z-index:5; } .star-rating a.three-stars{ width:60%; z-index:4; } .star-rating a.four-stars{ width:80%; z-index:3; } .star-rating a.five-stars{ width:100%; z-index:2; } .star-rating .current-rating{ z-index:1; background-position: left center; }">تگ<head> قرار دهید.

از این روش فقط در طراحی سایت هایی که تعداد صفحات کمتری دارند ، ولی بهترین روش برای داشتن طراحی سایت حرفه ای استفاده از روش css خارجی میباشد.

مزایای استفاده از این سبک :

• تنها بر روی صفحاتی که از این سبک استفاده کرده اند تاثیر میگذارد.
• بر خلاف سبک درون خطی ، این روش میتواند از خاصیت ارث بری کلاس ها استفاده کند.برای مثال میتوانید از یک Style در چندین جای همان صفحه اسفاده کنید.
• این سبک ممکن است اولویت بالاتری از CSS خارجی ها داشته باشند.

معایب استفاده از این سبک : 

• تنها در صفحاتی که در آن هستند تاثیر میگذارند.
• افزایش زمان بارگزاری صفحه 

<head>
<style>
           hr {color:silver;}
           p {margin-left:20px;}
           body {background-image:url("images/bg.gif");}
</style>
</head>

این روش از نوشتن css دارای بالاترین اولویت اجرا نسبت به دو روش دیگر است. استفاده از این روش تمامی Style های موجود در دو روش دیگر را نادیده میگیرد.این روش در واقع  هدف واقعی  استفاده از css را کاهش میدهد .

برای اینکه طراحی سایت بهینه تری داشته باشید پیشنهاد میشود که از این روش فقط در مواقع ضروری استفاده کنید.

با استفاده از ویژگی style در یک عنصر میتوانید از این روش نوشتن css استفاده کنید.

مثال :

<p style="background: blue; color: white;">A new background and
font color with inline CSS</p>

css چیست ؟ الگوهای آبشاری یا روی‌ انداز آبشاری سَبْک یا سی‌ اس‌ اس (به انگلیسی: CSS: Cascading Style Sheets ) در کنار اچ‌تی‌ام‌ال هستهٔ فناوری ساخت صفحه‌های وب هستند. سی‌اس‌اس روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها) بر صفحه‌های وب است. الگوهای آبشاری از جنس زبان‌های نشانه‌گذاری، با ساختار متن سادهٔ رایانه هستند و درون هرکدام، دستورهایی آبشار مانند و پی‌درپی، برای چگونگی نمایش هر صفحه وب افزوده می‌شود. به گفته‌ای ساده تر، این دستورها روش نشان داده شدن قلم‌ها و اندازه شان، رنگ‌ها و پس زمینه‌ها، روش چیدمان موزاییک‌های دربرگیرنده داده‌ها (دیواره ها)، و بسیاری دیگر از عنصرهای ساختار هر صفحه وب را، درون خود جای می‌دهند.

این کد بروز بودن قیمت سکه و ارز را در هر روز در وبلاگ و سایت شما نشان خواهد داد.مثلا قیمت سکه های تمام طرح قدیم وسکه های تمام طرح جدید و سکه های ربع ونیم  را نیز نشانگر می باشد.همچنین در ارز ها نیز نوع ارز قیمت خرید و قیمت فروش لحاظ شده است.که قیمت ها به تومان است.این کد نیز درهر روزآپدیت میشود در صورت آپدیت نشدن خطا را در نظرات وبلاگ گزارش کنید.

مشاهده جدول نرخ سکه                                  دریافت کد نرخ سکه

مشاهده جدول نرخ ارز                                      دریافت کد نرخ ارز  

همیشه یکی از بزرگترین دغدغه ی وبلاگ نویسان،داشتن محل مناسبی برای آپلود فایل ها و تصاویر بوده است. فیلتر شدن آپلودسنترهای مختلفی داخلی و خارجی ، عدم سرویس دهی مناسب و همچنین حذف فایل ها پس از مدت محدود این معضل را همیشگی کرده بطوریکه وبلاگنویسان کمتر حرفه ای همیشه با مشکل روبرو هستند . شما با استفاده از این ابزار می توانید براحتی و بصورت مستقیم از سایت و وبلاگ خود عکس  و انواع فایل های گرافیکی را در یک فضای امن آپلود نموده و آدرس مستقیم آن را دریافت کنید . این ابزار  با کمک  آپلود سنتر قدرتمندIRimg  طراحی و در اختیار علاقمندان قرار گرفته است. یکی از مهم ترین و بهترین ویژگی این آپلود سنتر آن است که هر فایلی را با هر فرمتی میتواند آپلود کند.

بسیاری از افراد برای اضافه کردن مطالب وبلاگ یا وبسایت خود از کپی کردن استفاده میکنند البته این کار پنسندیده نیست و کدهایی هم برای قفل کردن کلیک راست در وبلاگ یا وبسایت وجود دارد.چون کپی کردن تنها از طریق کلیک راست کردن وجود دارد بماند که با برنامه هایی میتوان بدون کلیک راست هم کپی کرد.منویی برای کلیک راست طراحی شده که بسیار زیبا بوده و نیز شامل صفحه نخست،آرشیو مطالب،پست الکترونیک و rss وبلاگ میباشد.این منوی زیبا را میتوان با هر رنگی که دوست داشته باشید به نمایش در آورید.برای این کار به جای کلمه green هر رنگی را که دوست دارید بگذارید.فقط باید در جاهای مشخص شده آدرس وبلاگ یا وبسایت وایمیل وبلاگ یا سایت خود را وارد کنید.             

      دریافت کد